import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { Table, Divider, Input, Button, Switch, Drawer, Form, Select, Space, message } from "antd";
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { asyncAdduser, asyncGetuserinfos } from "../../actions/userAction";
const { Search } = Input;
const { Option } = Select;

export default function administratorsview() {
  const data: any = [];
  const dispatch: any = useDispatch();
  const [result, setresult] = useState([]);
  useEffect(() => {
    dispatch(asyncGetuserinfos({})).then((res: any) => {
      if (res.data.code == 1) {
        setresult(res.data.result);
      }
    });
  }, []);
  console.log(result);
  result.forEach((item: any) => {
    console.log(item);
    data.push({
      key: item._id,
      name: item.username,
      card: item.useraccount,
      role: item.usertype == 1 ? "超级管理员" : item.usertype == 2 ? "医生" : "护士",
      phone: item.userphone,
      time: item.usertime,
      operation: (
        <div>
          <FormOutlined style={{ fontSize: "20px", marginRight: "40px" }} />
          <DeleteOutlined style={{ fontSize: "20px", marginLeft: "10px" }} />
        </div>
      ),
      check: item.checked == true ? <Switch defaultChecked onChange={onChange} /> : <Switch onChange={onChange} />,
    });
  });
  function onChange(checked: any) {
    console.log(`switch to ${checked}`);
  }
  const columns = [
    {
      title: "用户名",
      dataIndex: "name",
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: "账号",
      dataIndex: "card",
    },
    {
      title: "角色",
      dataIndex: "role",
    },
    {
      title: "手机号码",
      dataIndex: "phone",
    },
    {
      title: "是否启用",
      dataIndex: "check",
    },
    {
      title: "添加时间",
      dataIndex: "time",
    },
    {
      title: "操作",
      dataIndex: "operation",
      render: (text: string) => <a>{text}</a>,
    },
  ];
  const rowSelection = {
    getCheckboxProps: (record: any) => ({
      name: record.name,
    }),
  };
  const onSearch = (value: any) => console.log(value);
  const [visible, setvisible] = useState(false);
  const onFinish = async (info: any) => {
    dispatch(asyncAdduser(info)).then(
      (res: any) => {
        if (res.data.code == 1) {
          message.success("添加成功");
          setvisible(false);
        }
      },
      (res: any) => {
        console.log(res);
      }
    );
  };
  const onFinishFailed = () => {
    message.error("请检查红色的错误提示");
  };
  return (
    <div>
      <Search placeholder="请输入账号" onSearch={onSearch} enterButton style={{ width: "300px", marginLeft: "20px" }} />
      <div style={{ position: "absolute", right: "50px", top: "140px" }}>
        <Button type="primary" style={{ color: "#1890ff", background: "rgb(219,235,255)", border: "none", marginRight: "20px" }}>
          删除
        </Button>
        <Button
          type="primary"
          onClick={() => {
            setvisible(true);
          }}>
          新增人员信息
        </Button>
      </div>
      <Divider />
      <Table
        rowSelection={{
          type: "checkbox",
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      />
      <Drawer
        title="添加人员信息"
        width={600}
        onClose={() => {
          setvisible(false);
        }}
        visible={visible}
        bodyStyle={{ paddingBottom: 80 }}
        extra={
          <Space>
            <Button
              onClick={() => {
                setvisible(false);
              }}>
              取消
            </Button>
            <Button type="primary">添加</Button>
          </Space>
        }>
        <Form layout="vertical" onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="on" hideRequiredMark style={{ width: "500px", margin: "0 auto" }}>
          <Form.Item name="username" label="姓名*" rules={[{ required: true, message: "请输入姓名" }]}>
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item name="useraccount" label="账号*" rules={[{ required: true, message: "请输入账号" }]}>
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item name="usertype" label="角色" rules={[{ required: true, message: "请选择角色" }]}>
            <Select placeholder="请选择角色">
              <Option value="1">超级管理员</Option>
              <Option value="2">医生</Option>
              <Option value="3">护士</Option>
            </Select>
          </Form.Item>
          <Form.Item name="userphone" label="手机号码" rules={[{ required: false, message: "请输入手机号码" }]}>
            <Input placeholder="请输入手机号码" />
          </Form.Item>
          <Form.Item name="userpwd" label="密码*" rules={[{ required: true, message: "请输入密码" }]}>
            <Input placeholder="请输入密码" />
          </Form.Item>
          <Form.Item style={{ position: "absolute", top: "16px", right: "24px" }}>
            <Button type="primary" htmlType="submit">
              添加
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}
